<template>
    <div class='sjwh'
        v-loading.fullscreen.lock="$store.state.loadingFlag"
        :element-loading-text="loadingText"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="top">
            <div class="flexEnd textWhite">
                <div class="title">重要经济目标防护建设管理</div>
                <!-- <div class="xx" title="用户"></div> -->
                <img class="ml10 mt10 cursor" src="@/assets/images/export.png" style="width: 15px;height: 16px;" @click="exportDialog=true" title="导出"/>
                <img class="ml10 mt10 cursor" src="@/assets/images/backup.png" style="width: 20px;height: 20px;" @click="backup" title="备份"/>
                <img class="ml10 mt10 cursor" src="@/assets/images/restore.png" style="width: 20px;height: 20px;" @click="getBackUpList" title="恢复"/>
                <div class="usericon">

                <img class="ml10 mt10 cursor" src="@/assets/images/user.png"/>
                    <div style="display: inline-table;font-size: 9px;">
                    <span class="ml10">{{userInfo}}</span><span class="ml20">{{userdw}}</span></div></div>
                <img class="ml10 mt10 cursor" src="@/assets/images/back.png" @click="backLogin" title="退出"/>
            </div>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
        <div class="foot">
          <div class="contentList">
            <div class="cursor"
              v-for="(item, index) in menuArr"
              @click="choseMenu(item, index)"
              :key="index"
              :class="index == choseName ? 'chose' : 'noChose'"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <el-dialog title="恢复" :visible.sync="bfDialog" :close-on-click-modal="false">
            <div class="table pl20" style="height: 440px;overflow-y: auto;width: 660px;">
                <el-table :data="sliceData" border
                          style="width: 100%">
                    <el-table-column prop="index" label="序号" width="80"></el-table-column>
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop label="操作" width="150">
                        <template slot-scope="scope">
                            <img src="../../assets/images/backUp/download.png" title="下载" alt="下载" @click.prevent="downloadBackUp(scope.row)"
                                 class="normalColor mr20 cursor">

                            <img src="../../assets/images/backUp/restore.png" title="恢复" alt="恢复" @click.prevent="restoreSql(scope.row)"
                                 class="normalColor mr20 cursor">

                            <img src="../../assets/images/backUp/delete.png" title="删除" alt="删除" @click.prevent="deleteBackUp(scope.row)"
                                 class="normalColor  cursor">
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </el-dialog>
        <el-dialog title="导出" :visible.sync="exportDialog" :close-on-click-modal="false" class="dialogTree">
            <div class="table pl20" style="height: 440px;overflow-y: auto;width: 660px;">
                <el-tree ref="tree"
                        accordion
                        class="filter-tree choseTree"
                        node-key="categoryId"
                        :data="dataTree"
                        :props="defaultProps"
                        show-checkbox
                        @check-change="handleCheck"
                ></el-tree>
                <!--<div v-show="choseName==1">
                    <div>
                        <el-select
                                class="noBg border1 selectYear"
                                v-model="selectYear"
                                placeholder="请选择">
                            <el-option
                                    v-for="(option, index) in yearArr"
                                    :key="index"
                                    :label="option"
                                    :value="option"
                            ></el-option>
                        </el-select>
                    </div>
                    <el-checkbox-group class="mt20" v-model="checkList" :max="1">
                        <el-checkbox label="1" style="width: 90%;margin-top: 10px;">重要经济目标数量综合统计表</el-checkbox>
                        <el-checkbox label="2" style="width: 90%;margin-top: 10px;">专业力量建设累计情况综合统计表</el-checkbox>
                        <el-checkbox label="3" style="width: 90%;margin-top: 10px;">单位专业力量年龄、知识结构情况综合统计表</el-checkbox>
                        <el-checkbox label="4" style="width: 90%;margin-top: 10px;">防护建设累计情况综合统计表</el-checkbox>
                        <el-checkbox label="5" style="width: 90%;margin-top: 10px;">单位经费年度情况综合统计表</el-checkbox>
                        <el-checkbox label="6" style="width: 90%;margin-top: 10px;">单位经费累计情况综合统计表</el-checkbox>
                    </el-checkbox-group>
                </div>-->

            </div>
            <div slot="footer"
                 class="dialog-footer">
                <el-button @click="exportData" class="btnDefault" >导出</el-button>
                <!--<el-button @click="exportBBdata" class="btnDefault" v-show="choseName==1">导出</el-button>-->
                <el-button @click="exportDialog=false" class="btnDefault">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {baseServe} from "../../request/api";

    export default {
    name:'sjwh',
    data () {
        return {
            loadingText:'',
            userInfo:'用户名：'+ localStorage.creater,
          userdw:'人防单位名称：'+ localStorage.rfdwmc,
            msg:"数据维护",
            choseName: sessionStorage.getItem("sjwhChoseName") || 0,
            menuArr: [
              { name: "数据速录", path: "/sjwh/sjsl" },
              { name: "统计报表", path: "/sjwh/tjbb/zyjjmb" },
              { name: "高级搜索", path: "/sjwh/gjss" },
            ],
          bfDialog:false,
          sliceData:[],
          exportDialog:false,
          dataTree:[],
          id:'',
          defaultProps:{
              label:'categoryName',
            children:'catagoryInfos',
          },
          checkList:[],
          yearArr:[],
          selectYear:'2019'
        }
    },
  mounted(){
    this.choseName=sessionStorage.getItem("sjwhChoseName"),
    this.getTreeData()
  },
    methods: {
      //导出
      exportData(){
        if(!this.id||this.id.length<1){
          this.$message({
            type: "warning",
            message: "请选择导出项!"
          });
          return
        }
        this.$store.state.loadingFlag=true
        baseServe.exportData({
          categoryids:this.id,
          levels: [0,1,2,3],
          rfdwnm: localStorage.getItem("rfdwnm")
        }).then(res=>{
          this.$store.state.loadingFlag=false
          const blob = new Blob([res.data])
          let e = document.createEvent('MouseEvents');
          let a = document.createElement('a');
          a.download = '重要经济目标数据.xlsx';
          a.href = URL.createObjectURL(blob);
          e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          a.dispatchEvent(e);
          this.exportDialog=false
        })
      },
      //导出报表
      exportBBdata(){
        if(this.checkList.length<1){
          this.$message({
            type: "warning",
            message: "请选择导出项!"
          });
          return
        }
        this.$store.state.loadingFlag=true
        if(this.checkList.indexOf('1')!=-1){
          this.exportZyjjmb()
        }
        if(this.checkList.indexOf('2')!=-1){
          this.exportZyll()
        }
        if(this.checkList.indexOf('3')!=-1){
          this.exportDwZyll()
        }
        if(this.checkList.indexOf('4')!=-1){
          this.exportFhjs()
        }
        if(this.checkList.indexOf('5')!=-1){
          this.exportDwjfnd()
        }
        if(this.checkList.indexOf('6')!=-1){
          this.exportDwjflj()
        }
      },
      //生成年限
      getYearArr(){
        this.yearArr=[]
        let year=new Date().getFullYear()
        for(let i=0;i<10 ;i++){
          this.yearArr.push(year-i)
        }
      },
      //导出重要jjmb
      exportZyjjmb(){
        // baseServe.exportzyjjmb({  rfdwnm: localStorage.getItem("rfdwnm"),year:this.selectYear}).then(()=>{
          window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zyjjmb/count?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.selectYear}`)
          this.$store.state.loadingFlag=false
          // const blob = new Blob([res.data])
          // let e = document.createEvent('MouseEvents');
          // let a = document.createElement('a');
          // a.download = '重要经济目标数量综合统计表.xlsx';
          // a.href = URL.createObjectURL(blob);
          // e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          // a.dispatchEvent(e);
          this.exportDialog=false
        // })
      },
      //导出zyll
      exportZyll(){
          window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zyll/build/sum?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.selectYear}`)
          this.$store.state.loadingFlag=false
          this.exportDialog=false
      },
      //导出dwzyll
      exportDwZyll(){
        window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zylljg?rfdwnm=${localStorage.getItem("rfdwnm")}`)
        this.$store.state.loadingFlag=false
        this.exportDialog=false
      },
      //导出fhjs
      exportFhjs(){
        window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/fhjs?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.selectYear}`)
        this.$store.state.loadingFlag=false
        this.exportDialog=false
      },
      //导出dwjfnd
      exportDwjfnd(){
        window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zyjjmb/ndjf?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.selectYear}`)
        this.$store.state.loadingFlag=false
        this.exportDialog=false
      },
      //导出dwjflj
      exportDwjflj(){
        window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zyjjmb/dwjf/count?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.selectYear}`)
        this.$store.state.loadingFlag=false
        this.exportDialog=false
      },
      //获取树
      getTreeData(){
        baseServe.getDetail({}).then(res => {
          // debugger
          this.dataTree = res.data.categoryInfos;
        })
      },
      //导出选中项
      handleCheck(data){
       this.id= this.$refs.tree.getCheckedKeys()
      },
      //获取列表
      getBackUpList(){
        this.bfDialog=true
        baseServe.backupSqlList({}).then(res=>{
          let arr=[]
          if(res.data.names&&res.data.names.length>0){
            res.data.names.map((v,i)=>{
              arr.push({name:v,index:i+1})
            })
          }
          this.sliceData=arr
        })
      },
      //备份
      backup(){
        this.$store.state.loadingFlag=true
        baseServe.backupSql({}).then(()=>{
          this.$store.state.loadingFlag=false
          this.$message({
            type: "success",
            message: "备份成功!"
          });
        })
      },
      //删除
      deleteBackUp(row){
        this.$confirm("此操作将删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deleteSql({ backName: row.name }).then(() => {
              this.getBackUpList()
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            })
          })
      },
      //下载
      downloadBackUp(row){
        baseServe.downloadSql({backUpName:row.name}).then(res=>{
          const blob = new Blob([res.data])
          let e = document.createEvent('MouseEvents');
          let a = document.createElement('a');
          a.download = row.name;
          a.href = URL.createObjectURL(blob);
          e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          a.dispatchEvent(e);
        })
      },
      //恢复
      restoreSql(row){
        this.$store.state.loadingFlag=true
        baseServe.restoreSql({backUpName:row.name}).then(()=>{
          this.$store.state.loadingFlag=false
          this.$message({
            type: "success",
            message: "恢复成功!"
          });
          setTimeout(()=>{
            location.reload()
          },800)
        })
      },
      backLogin() {
        //let params = {token: localStorage.getItem("token")}
        this.$axios.get("/logout").then(res => {
          if (res.data.result.resultCode == "000000") {
            this.$message({
              type: "success",
              message: "已退出登录!"
            });
            setTimeout(() => {
              this.$router.push("/");

              localStorage.setItem("token", "");
            }, 1000);
          }
        });
      },
      choseMenu(item, index) {
        sessionStorage.setItem("sjwhChoseName",index)
        this.choseName = index;
        // localStorage.setItem("currentLight", index);
        this.$router.push(item.path);
      },
    }
}
</script>

<style lang='less'>
    @import "../../assets/css/global.css";
    .sjwh {
        background-color: #1a303a;
        height: 100%;
        /*width: 100%;*/
        /*position: relative;*/
        .usericon{
            position: absolute;
            left: 5%;
        }
        .top {
            height: 60px;
            width: 100%;
            background: url("../../assets/images/亮色框2.png") no-repeat center center;
            background-size: 100% 100%;

            .flexEnd {
                position: relative;
                padding-right: 7%;

                .mr10 {
                    width: 200px;
                }

                .title {
                    position: absolute;
                    left: 50%;
                    text-align: center;
                    font-size: 30px;
                    color: #c3e2f3;
                    transform: translateX(-50%);
                    top: 0px;
                }
            }

            /*.xx {*/
            /*    width: 30px;*/
            /*    height: 30px;*/
            /*    background: url("../../assets/images/用户.png") no-repeat center center;*/
            /*}*/
        }

        .content {
            width: 100%;
            height: calc(100% - 60px);
            /*overflow: hidden;*/
            display: flex;
        }
        //     .menu::-webkit-scrollbar {
        //         width: 4px;
        //     }

        //     .menu::-webkit-scrollbar-thumb {
        //         background: rgba(5, 230, 230, 0.6);
        //         border-radius: 30px;
        //     }
        //     .menu {
        //         position: absolute;
        //         margin-top: -18px;
        //         z-index: 2;
        //         width: 250px;
        //         height: calc(100% - 42px);
        //         overflow-y: auto;
        //         background-color: #1e3c48;

        //         .dialogRight {
        //             .el-tree-node__content > .el-tree-node__expand-icon {
        //                 position: absolute;
        //                 right: 10px;
        //             }
        //             .el-tree-node__content {
        //                 height: 50px !important;
        //             }

        //             .el-tree-node {
        //                 padding-left: 20px !important;
        //                 .el-tree-node__content {
        //                     padding-left: 30px !important;
        //                 }
        //             }
        //             // .el-tree-node__children{
        //             //      .el-tree-node__content{
        //             //   padding-left:70px !important;
        //             // }
        //             // }
        //         }
        //         .el-menu-item:focus,
        //         .el-menu-item:hover {
        //             outline: 0;
        //             text-align: center;
        //             background-color: #1e3c48 !important;
        //             background: url("../../assets/image/菜单栏chose_on.png") no-repeat;
        //             background-position: center;
        //         }

        //         .el-menu-item {
        //             text-align: center;
        //         }

        //         .el-submenu__title {
        //             text-align: center !important;
        //         }

        //         .el-submenu__title:focus,
        //         .el-submenu__title:hover {
        //             outline: 0;
        //             background-color: #1e3c48 !important;
        //             background: url("../../assets/image/菜单栏chose_on.png") no-repeat;
        //             background-position: center;
        //         }

        //         .el-submenu__title {
        //             padding-left: 30px;
        //         }
        //     }

        //     .rfdwList {
        //         /*margin-top: 40px;*/
        //         position: absolute;
        //         top: 60px;
        //         left: 250px;
        //         width: calc(100% - 250px);
        //         height: calc(100% - 60px);
        //         .el-breadcrumb__inner {
        //             color: #ccc;
        //         }
        //         .rfdwList_box {
        //             padding: 0 1%;
        //             .el-table {
        //                 .el-table th {
        //                     padding: 12px 0;
        //                 }
        //                 .cell {
        //                     height: 23px;
        //                     .titleDiv {
        //                         line-height: 25px;
        //                         height: 23px;
        //                     }
        //                     .noBg {
        //                         width: 50px;
        //                         height: 23px;
        //                         padding: 0;
        //                         .el-input {
        //                             height: 23px;
        //                             padding: 0;
        //                         }
        //                         .el-input__icon {
        //                             width: 20px;
        //                         }
        //                         .el-input--suffix {
        //                             height: 35px !important;
        //                             .el-input__suffix {
        //                                 top: -4px;
        //                             }
        //                             .el-input__inner {
        //                                 display: none;
        //                                 height: 23px;
        //                             }
        //                         }
        //                     }
        //                 }
        //             }
        //         }
        //         .list_box {
        //             display: flex;
        //             margin-top: 20px;
        //             padding-right: 10px;
        //             height: calc(100% - 60px);
        //             .currentHeard {
        //                 /*padding: 12px 0 12px 20px;*/
        //                 position: absolute;
        //                 left: 0;
        //                 top: 20px;
        //                 height: 40px;
        //                 width: 100%;
        //                 font-family: "Microsoft Yahei-Bold";
        //                 color: rgba(255, 255, 255, 0.5);
        //                 font-size: 16px;
        //                 display: flex;
        //                 .el-breadcrumb__inner {
        //                     color: rgba(255, 255, 255, 0.5);
        //                     font-family: "Microsoft Yahei-Bold";
        //                     font-size: 16px;
        //                     height: 40px;
        //                 }
        //                 .el-breadcrumb__item {
        //                     color: rgba(255, 255, 255, 0.5);
        //                     font-family: "Microsoft Yahei-Bold";
        //                     font-size: 16px;
        //                     height: 40px;
        //                 }
        //             }
        //             .detailNavigationBar {
        //                 // order: 1;
        //                 border: 1px solid rgba(5, 230, 230, 0.3);
        //                 border-top: 4px solid #00ffff;
        //                 box-sizing: border-box;
        //                 background-color: #1c3742;
        //                 padding: 14px;
        //                 margin-left: 10px;
        //                 width: 200px;
        //                 // height: calc(100% - 60px);
        //                 text-align: center;
        //                 .detail {
        //                     width: 150px;
        //                     margin: 8px 12px 8px 0px;
        //                     font-size: 16px;
        //                     height: 30px;
        //                     line-height: 39px;
        //                     overflow: hidden;
        //                     font-family: "Microsoft Himalaya";
        //                     color: #626c71;
        //                     text-align: center;
        //                     color: #bbbbbb;
        //                     cursor: pointer;
        //                     text-overflow: ellipsis;
        //                     white-space: nowrap;
        //                 }
        //                 .detail:active {
        //                     font-family: "Microsoft Himalaya";
        //                     color: #ffffff;
        //                     // background: url("../../assets/image/二级菜单chose_nor.png")
        //                     //   no-repeat center;
        //                 }
        //             }
        //             .zyjjmbDetailBox {
        //                 border: 1px solid rgba(5, 230, 230, 0.3);
        //                 border-top: 4px solid #00ffff;
        //                 box-sizing: border-box;
        //                 background-color: #1c3742;
        //                 padding: 20px;
        //                 margin-left: 10px;
        //                 height: 100%;
        //                 width: calc(100% - 203px);
        //             }
        //             // .redwTable {
        //             //   border: 1px solid rgba(5, 230, 230, 0.3);
        //             //   border-top: 4px solid #00ffff;
        //             //   box-sizing: border-box;
        //             //   background-color: #1c3742;
        //             //   padding: 50px;
        //             //   margin-left: 10px;
        //             //   width: calc(100% - 200px);
        //             //   // height: calc(100% - 60px);
        //             //   .right_one_body {
        //             //     background-color: transparent;
        //             //     height: 93%;
        //             //     width: 100%;
        //             //     padding: 0% 1% 2%;
        //             //     position: relative;
        //             //     box-sizing: border-box;
        //             //     // .el-table th {
        //             //     //   background-color: #11657d;
        //             //     //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
        //             //     //   color: white;
        //             //     // }
        //             //     .el-table__body tr.current-row > td {
        //             //       background-color: transparent;
        //             //     }

        //             //     .page {
        //             //       margin-top: 20px;
        //             //     }
        //             //   }
        //             // }
        //         }
        //         .currentPath {
        //             // order: 2;
        //             padding: 15px;
        //             // width: 100%;
        //             height: 40px;
        //         }
        //     }
        // }
    .foot {
      position: absolute;
      bottom: 0;
      background: url("../../assets/images/foot.png") no-repeat center center;
      background-size: 100% 100%;
      width: 100%;
      height: 60px;
      line-height: 60px;
      .contentList {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        font-family: "Microsoft Yahei";
        height: 100%;
        div {
          padding: 10px 30px;
          text-align: center;
          box-sizing: border-box;
          height: 100%;
        }
        .chose {
          color: #00f0ff;
          font-family: "Microsoft Yahei-Bold";
        }
        .noChose {
          color: #fff;
        }
      }
    }
    }
</style>
